<template>
    <div class="">
        <!-- 添加或修改用户配置对话框 -->
        <el-dialog title="添加用户" v-model="userDialog" width="600px" append-to-body>
            <el-form :model="form" :rules="rules" ref="userRef" label-width="80px">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="账号" prop="username">
                            <el-input v-model.trim="form.username" placeholder="请输入账号" maxlength="30" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="密码" prop="password">
                            <el-input v-model.trim="form.password" placeholder="请输入密码" type="password" maxlength="20"
                                show-password />
                        </el-form-item>
                    </el-col>

                    <el-row>
                        <el-col v-if="!(nodeName == '管理组' || nodeName == '老师组')"  :span="24">
                            <el-form-item label="学号" prop="school_code">
                                <el-input v-model.trim="form.school_code" placeholder="请输入学号"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-col v-if="!(nodeName == '管理组' || nodeName == '老师组')" :span="24">
                        <el-form-item label="选择班级">
                            <el-select v-model="form.class_info_id" placeholder="请选择班级">
                                <el-option v-for="item in classData" :key="item.id" :label="item.cla_name"
                                    :value="item.id" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>



                <el-row>
                    <el-col :span="24">
                        <el-form-item label="姓名" prop="nick_name">
                            <el-input v-model.trim="form.nick_name" placeholder="请输入姓名" maxlength="30" />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="24">
                        <el-form-item label="手机号码" prop="mobile">
                            <el-input v-model.trim="form.mobile" placeholder="请输入手机号码" maxlength="11" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>



            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, defineExpose, onMounted } from "vue"

import { adduser } from "@/api/user"
import { ElMessage } from "element-plus";
import useUserStore from "@/store/modules/user";
const { proxy } = getCurrentInstance();
const userDialog = ref(false)
const emits = defineEmits(['addUserSuccess']);
const props = defineProps({
    classData: {
        type: Array
    },
    nodeName: {
        type: String
    },
    nodeId: {
        type: String
    }
})



const form = ref(
    {
        username: "",
        password: "",
        class_info_id: "",
        nick_name: "",
        mobile: '',
        school_code: "",
        is_cla: null,
        tenant_id:useUserStore().tenant_id
    
    },
)




// 由父组件控制打开对话框//添加成员
const openDialog = () => {

    userDialog.value = true
    console.log(form.value.class_info_id);
}
watch(() => props.nodeName, nv => {
    if (nv == '老师组' || nv == '管理组') {
        form.value.is_cla = false
        form.value.class_info_id = props.nodeId + ''

    } else {
        form.value.is_cla = true
        form.value.class_info_id = props.nodeId + ''
    }

}, { immediate: true, deep: true })



const rules = ref({
    username: [{ required: true, message: "用户名称不能为空", trigger: "blur" }, { min: 2, max: 20, message: "用户名称长度必须介于 2 和 20 之间", trigger: "blur" }],
    password: [{ required: true, message: "用户密码不能为空", trigger: "blur" }, { min: 6, max: 20, message: "用户密码长度必须介于 6 和 20 之间", trigger: "blur" }, { pattern: /^[^<>"'|\\]+$/, message: "不能包含非法字符：< > \" ' \\\ |", trigger: "blur" }],
    mobile: [{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }],
    school_code: [{ required: true, message: "学号不能为空", trigger: "blur" },{ min: 0, max: 30, message: '学号不能超过30位', trigger: 'blur' }]
})




// 点击取消
const cancel = () => {
    userDialog.value = false
    proxy.$refs.userRef.resetFields();
}

// 点击确定提交表单
const submitForm = () => {
    proxy.$refs.userRef.validate(valid => {
        if (valid) {

            let data = {
                "user": form.value
            }

            console.log(data);
            
            adduser(data).then(res => {
                proxy.$refs.userRef.resetFields();
                userDialog.value = false
                if (!res) {
                    ElMessage.success("添加成功")
                    emits("addUserSuccess")
                } else {
                    ElMessage.error(res.response.data)
                }

            })

        }

    })
}
defineExpose({
    openDialog
})

</script>

<style lang="scss" scoped></style>